$(document).ready(function(){
    // 在这里写你的代码...
    const image = document.getElementById('my-image');
    var taggd = new Taggd(image, {}, []).enableEditorMode();

    layui.use(['layer', 'form','element'], function(){
        var layer = layui.layer
            ,form = layui.form
            ,element = layui.element;
        element.on('tab(docDemoTabBrief)', function(data){
            //切换tab标签触发的方法
            console.log(data);
        });
        form.on('radio(demoRadio)', function(data){
            //单选框触发方法
            console.log(data.elem); //得到radio原始DOM对象
            console.log(data.value); //被点击的radio的value值
        });
    });

    radio_value(taggd)
    //input输入框监听事件
    $("#inputDiv").bind("input propertychange",function(event){
        var inValue = $("#inputDiv").val()
        radio_value(taggd,inValue)
    });
});

function radio_value(taggd,inValue) {
    //第一步：获取当前单选框的值
    var source_name = $("input:checked")[0].title;
    //第二步：获取tab标签选项
    var tab_name = $(".layui-this").attr("lay-id");
    var clickID = 0;
    $('.listclick').remove();
    taggd.deleteTags();
    //console.log(tab_name)
    //第三步：发送请求，得到定位数据
    $.ajax({
        type: "GET",
        url: "http://192.168.120.121:8881/yhpc/carddata",
        success: function(result){
            var len = result.data.length;
            var data = result.data;
            //重新定义列表id
            var searchID=0;
            for (i = 0; i < len; i++) {
                var reg = new RegExp(inValue);
                //data-class为标识字段，用于与图上点位对应
                var text2='<blockquote class="layui-elem-quote listclick" data-id='+i+' data-class='+'D_'+data[i].cardNum+'>'+data[i].name+'</blockquote>';
                //左侧地图打点
                var x = Math.round(Math.random() * (0 - 1000) + 1000);
                var y = Math.round(Math.random() * (0 - 500) + 500);
                var info = "姓名:"+data[i].name+"所在位置："+data[i].areaName;
                if (inValue == undefined || inValue == ''){
                    //说明没有填写搜索内容，此时全部展示
                    //console.log('输入框没有内容');
                    $("#alldata").append(text2);
                    taggd.addTag(new Taggd.Tag({x: x, y: y}, info,{class: "D_"+data[i].cardNum}).disableEditorMode())
                }else{
                    //输入框有内容
                    //console.log('输入框来了')
                    if (data[i].name.match(reg)){
                        //匹配输入框中的内容展示
                        var text3='<blockquote class="layui-elem-quote listclick" data-id='+searchID+' data-class='+'D_'+data[i].cardNum+'>'+data[i].name+'</blockquote>';
                        $("#alldata").append(text3);
                        searchID++;
                        taggd.addTag(new Taggd.Tag({x: x, y: y}, info,{class: "D_"+data[i].cardNum}).disableEditorMode())
                    }
                }




            }
            $("#alldata").off("click").on("click", ".listclick", function(){
                //点击id为div_link时调用的处理函数
                var dianID=$(this).attr('data-id');
                //隐藏所有的详情
                taggd.getTag(clickID).hide();
                taggd.getTag(parseInt(dianID)).show();
                clickID = parseInt(dianID)
            });
        }
    });
    // $(".listclick").on("click", function(){
    //     alert( $(this).attr('data-class') );
    // });
}